<template>
	<view>
		<view class="detail">
			<!-- 营地详情页 -->
			<!-- 轮播图 -->
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" indicator-color="#999999" indicator-active-color="white" indicator-dots autoplay interval="2000"
						 duration="500" circular="true">
							<swiper-item v-if="imgs!=null" v-for="img in imgs" :key="img.imgId">
								<view class="swiper-item uni-bg-red">
									<image :src="img.url"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="detail_content">
				<view class="detail_left">
					<view class="detail_left_title">
						<text>{{camp.campname}}</text>
					</view>
					<view class="detail_left_address">
						<text>景区地址:{{camp.address}}</text>
					</view>
					<view class="detail_left_tel">
						<text>联系电话：{{camp.tel}}</text>
					</view>
				</view>
				<view class="line"></view>
				<!-- @click="navigation('pages/camp_navigation/camp_navigation?campname=')" -->
				<view class="detail_right" @click="handleNavigate">
					<view class="icon">
						&#xec43;
					</view>
					<view>
						<text>一键导航</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 营地介绍 -->
		<view class="introduce">
			<view class="introduce_title">
				<view>
					<text class="introduce_title_left">营地介绍</text>
				</view>
				<view class="introduce_title_right">
					<text class="icon">&#xe8bf;</text>
					<text>收藏 &nbsp;&nbsp;</text>
				</view>
			</view>
			<view class="introduce_content">
				<!-- <text>重庆茶山竹海国家森林公园位于重市永川区城北茶山竹海街道办事处辖区,东距重庆市区55公里，西距大足石刻50公里、距成都272公里,南至泸州72公里，总面积9979.00公顷森林公园地处中亚热带湿润气候区年平均气温14摄氏度,植被类型为中亚热带常绿阔叶林，景区森林覆盖率达97%,同时也是国家AAAA级风景区。</text> -->
				<text>{{camp.introduce}}</text>
			</view>
		</view>
		<!-- 预约 -->
		<view class="appointment">
			<view class="appointment_title">
				<text class="appointment_title_content">在线预订</text>
			</view>
			<view class="appointment_content">
				<view class="appointment_content_title">
					<text>悦客沙坪坝区花马山房车露营基地</text>
				</view>
				<view class="appointment_content_right" @click="gotoappointment('pages/camp_appointment/camp_appointment?campId=')">
					<text>预订</text>
				</view>
				<view class="appointment_img">
					<image v-if="imgs.length!=0" :src="imgs[0].url"></image>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	// 引入list组件
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	//导入字体图标
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	//导航
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import amapFile from '../camp_map/amap-wx.js';
	var util = require('../../common/util.js');
	var formatLocation = util.formatLocation;
	export default {
		components: {
			uniList,
			uniListItem,
			uniIcons,
			uniCard,
			uniNavBar,
			uniSection
		},
		onLoad(options) {
			console.log(options.campId)
			//查询营地信息
			uni.request({
				url: this.webUrl+'camp/selectbyCampId?campId=' + options.campId,
				success: (res) => {
					this.camp = res.data.obj;
					this.selectNavigation(this.camp.campname);
				}
			});
			//查询营地图片
			uni.request({
				url: this.webUrl+'camp/selectCampImgByCampId?campId=' + options.campId,
				success: (res) => {
					console.log(res)
					this.imgs = res.data.list;
				}
			});
			//导航
			console.log('amapFile', amapFile)
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.markers[1].latitude = res.latitude;
					this.markers[1].longitude = res.longitude;
					this.currentLatitude = res.latitude;
					this.currentLongitude = res.longitude;
					console.log(res)
				},
				fail: function() {
					console.log('fail')
				},
				complete: () => {
					this.goTo('car')
				}
			});
		},
		data() {
			return {
				camp: '',
				imgs: [],
				//导航
				title: 'map',
				latitude: 29.72,
				longitude: 106.63,
				key: '55d7c33d0ea584f8da4af4a79cebd89b',
				distance: 0,
				duration: 0,
				maxDuration: false,
				curentLatitude: '',
				curentLongitude: '',
				active: 'car',
				polyline: null,
				markers: [],
				navigation: '',
				a:'',
				b:''
			}
		},
		methods: {
			gotoappointment: function(path) {
				uni.navigateTo({
					url: "/" + path + this.camp.campId
				})
			},
			navigation1(path) {
				uni.navigateTo({
					url: "/" + path + this.camp.campname
				})
			},
			//导航导航
			//根据营地名查询营地坐标
			selectNavigation(campname) {
				console.log(campname)
				uni.request({
					url: this.webUrl+'camp/selectNavigation?campName=' + campname,
					success: (res) => {
						console.log(res)
						this.navigation = res.data.list[0];
						console.log(11323)
						console.log(this.navigation)
						this.latitude = this.navigation.latitude;
						this.longitude = this.navigation.longitude;
						this.a = this.navigation.campName;
						this.b = this.navigation.address;
						// console.log(this.navigation)
						// this.handleNavigate(this.navigation);
					}
				});
			},
			handleNavigate() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: this.a,
					address: this.b,
					success: function() {
						console.log('success');
					}
				});
			},
			drawPolyline(self, color) {
				return {
					origin: this.longitude + ',' + this.latitude,
					destination: this.currentLongitude + ',' + this.currentLatitude,
					success(data) {
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						self.distance = data.paths[0].distance;
						console.log(data.paths[0].distance / 1000 > 50)
						console.log(self.active !== 'car')
						if (data.paths[0].distance / 1000 > 50) {
							self.maxDuration = true;
						} else {
							self.maxDuration = false;
						}
						self.duration = parseInt(data.paths[0].duration / 60),
							self.polyline = [{
								points: points,
								color: color,
								width: 6,
								arrowLine: true
							}]

					},
					fail(e) {
						console.log(e)
					},
					complete() {
						console.log('complate')
					}
				}
			},
			getPolyline(_type) {
				var amap = new amapFile.AMapWX({
					key: this.key
				});
				var self = this;
				switch (_type) {
					case 'car':
						amap.getDrivingRoute(this.drawPolyline(this, "#0091ff"));
						break;
					case 'walk':
						if (this.maxDuration) {
							return false;
						}
						amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
						break;
					case 'ride':
						if (this.maxDuration) {
							return false;
						}
						amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
						break;
					default:
						return false;
				}
			},
			goTo(_type) {
				this.getPolyline(_type);
				this.active = _type;
			}
		},
		filters: {
			filterDistance(val) {
				return (val / 1000).toFixed(2)
			},
			formatTime(val) {
				return (val / 60).toFixed(2)
			}
		},
	}
</script>

<style lang="scss">
	.swiper {
		width: 750rpx;
		height: 480rpx;

		image {
			width: 100%;
			height: 480rpx;
		}
	}

	.detail {
		font-size: 28rpx;
		background-color: #464646;
		color: white;

		.detail_content {
			width: 100%;
			height: 230rpx;

			.detail_left {
				width: 70%;
				float: left;
				padding-left: 15rpx;

				.detail_left_title {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
				}

				.detail_left_address {
					font-size: 28rpx;
				}

				.detail_left_tel {
					margin-top: 5rpx;
					font-size: 28rpx;
				}
			}

			.detail_right {
				width: 25%;
				float: right;
				text-align: center;

				.icon {
					width: 100%;
					height: 140rpx;
					font-size: 70rpx;
					line-height: 150rpx;
				}

			}

			.line {
				width: 1rpx;
				height: 190rpx;
				float: left;
				background-color: #666666;
				margin-top: 20rpx;
			}
		}
	}

	.introduce {
		width: 100%;
		// height: 300rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #F8F8F8;

		.introduce_title {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #C0C0C0;
			color: #888888;

			.introduce_title_left {
				margin-left: 15rpx;
			}

			.introduce_title_right {
				width: 15%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-right: 45rpx;
			}
		}

		.introduce_content {
			width: 97%;
			margin: 20rpx auto;
			// height: 209rpx;
			// overflow: hidden;
			color: #3C3E49;
		}
	}

	.appointment {
		width: 100%;
		height: 500rpx;
		background-color: #DCDDDD;
		margin-top: 40rpx;
		font-size: 28rpx;

		.appointment_title {
			margin-top: 20rpx;
			width: 100%;
			height: 90rpx;
			color: white;
			line-height: 90rpx;
			background-color: #464646;

			.appointment_title_content {
				margin-left: 15rpx;
			}
		}

		.appointment_content {
			width: 90%;
			height: 370rpx;
			border-radius: 30rpx;
			margin: 0 auto;
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx;
			padding-top: 15rpx;

			.appointment_content_title {
				margin-left: 25rpx;
			}

			.appointment_content_right {
				margin-right: 25rpx;
				width: 100rpx;
				height: 40rpx;
				text-align: center;
				border-radius: 8rpx;
				color: #FFA197;
				border: 1rpx solid #FFA197;
			}
		}

		.appointment_img {
			width: 80%;
			height: 300rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 300rpx;
			}
		}
	}
</style>
